
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<div >
    <div>商品浏览</div>
    <div>
        <table  border='1'>
            <thead>
            <tr>
                <th width:10%;>
                    <input type="checkbox" id="chkAll"/>
                    <label for="chkAll">全选</label>
                </th>
                <th width:20%;>商品</th>
                <th width:20%;>商品名称</th>
                <th width:10%;>单价</th>
                <th width:20%;>数量</th>
            </tr>
            </thead>
            <tbody id="tbMain"></tbody>
        </table>
    </div>
    <div class="footer">
    	 <a href="#" id="lnkDeleteAll">删除选中商品</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    	 <a href="#" id="lnkAdd">添加选中商品</a>
    </div>
</div>
<script src="js/s4.js"></script>
</body>
<script type="text/javascript">
var carts = [
    {name:'商品-1' , price:12 , amount:2 , image:'img1.jpg'},
    {name:'商品-2' , price:20 , amount:3 , image:'img1.jpg'},
    {name:'商品-3' , price:35 , amount:1 , image:'img1.jpg'},
    {name:'商品-3' , price:45 , amount:1 , image:'img1.jpg'}
];
window.onload = function(){
    // 遍历数组，加载数据
    loadData();

	//给table加行，carts数组里有几行那table数组里就有几行
    function loadData(){
        var tbody = document.getElementById('tbMain');
        for(var i = 0 ;i < carts.length; i++){
            var tr = createDataRow(carts[i]);
            tbody.appendChild(tr);
        }
    }

    //给table数组加列
    function createDataRow(item){
        var tr = document.createElement('tr');
        // 复选框
        var tdCheckbox = document.createElement('td');
        tr.appendChild(tdCheckbox);

        var chk = document.createElement('input');
        chk.type = 'checkbox';
        chk.name = 'chkItem';
        tdCheckbox.appendChild(chk);

        chk.onclick = function(e){
            // 检查所有的复选框的状态
            var chkItems = document.getElementsByName('chkItem');
            var flag = true;
            for(var i = 0 ;i < chkItems.length ; i++){
                if(!chkItems[i].checked){
                    flag = false;
                    break;
                }
            }

            // 设置全选的状态
            document.getElementById('chkAll').checked = flag;
        }

        // 商品图片
        var tdImage = document.createElement('td');
        tr.appendChild(tdImage);

        var img = document.createElement('img');
        img.src = 'img/' + item.image;
        img.width = 96;
        tdImage.appendChild(img);

        // 商品名字
        var tdName = document.createElement('td');
        tdName.innerText = item.name;
        tr.appendChild(tdName);

        // 单价
        var tdPrice = document.createElement('td');
        tdPrice.innerText = item.price;
        tr.appendChild(tdPrice);

        // 数量
        var tdAmount = document.createElement('td');
        tdAmount.className = 'clear-inline';
        tr.appendChild(tdAmount);

        // 减
        var btnSub =  document.createElement('button');
        btnSub.className = 'minus';
        btnSub.innerText = '-';
        tdAmount.appendChild(btnSub);

        btnSub.onclick = function(e){
            // 更新数据
            var value = parseInt(this.nextSibling.value);
            if(value > 1){
                value--;
                this.nextSibling.value = value;
                // 更新小计 reflow(回流)与repaint(重绘)
                this.parentNode.nextSibling.innerText = this.parentNode.previousSibling.innerText * value;
                //
                var index = getRowIndex(this.parentNode.parentNode);
                carts[index].amount = value;
                updateTotal();
            }


        }

        // 显示数量的一个文本框
        var txtAmount = document.createElement('input');
        txtAmount.type = 'text';
        txtAmount.value = item.amount;
        tdAmount.appendChild(txtAmount);

        // 加
        var btnAdd =  document.createElement('button');
        btnAdd.className = 'add';
        btnAdd.innerText = '+';
        tdAmount.appendChild(btnAdd);

        btnAdd.onclick = function(e){
            //  更新数量
            this.previousSibling.value++;

            // 更新小计
            this.parentNode.nextSibling.innerText = this.parentNode.previousSibling.innerText * this.previousSibling.value;

            // 修改数组中的数量
            var index = getRowIndex(this.parentNode.parentNode);
            carts[index].amount++;
            updateTotal();
        };

        return tr;
    }

	// 全选事件,当全选时，把所有复选框的checked属性变为checked
    var chkAll = document.getElementById('chkAll');
    chkAll.onclick = function(e){
        // 获取所有的复选框
        var chkItems = document.getElementsByName('chkItem');
        // 设置checked属性
        for(var i = 0 ;i < chkItems.length ; i++){
            chkItems[i].checked = this.checked;
        }
    };
	
	//删除选中的商品
	var lnkDeleteAll = document.getElementById('lnkDeleteAll');
    lnkDeleteAll.onclick = function(e){
        //  获取所有复选框
        var chkItems = document.getElementsByName('chkItem');

        // 检查状态
        for(var i = chkItems.length -1 ; i >= 0 ; i--){
            if(chkItems[i].checked){
                // 如果状态是被选中状态，把当前行删除
                chkItems[i].parentNode.parentNode.parentNode.removeChild(chkItems[i].parentNode.parentNode);
                carts.splice(i , 1);
            }
        }
    };

	//把选中的商品添加到时购物车
	var lnkAdd = document.getElementById('lnkAdd');
	lnkAdd.onclick = function(e){
		//  获取所有复选框
        var chkItems = document.getElementsByName('chkItem');

        // 检查状态
        for(var i = chkItems.length -1 ; i >= 0 ; i--){
            if(chkItems[i].checked){
                // 如果状态是被选中状态，把当前商品添加到表格中去
            	add();
            }
        }
	};
	
	function add() {
		var mytab = document.getElementById("table");
		//获取用户信息
		var no = parseInt(document.getElementById("index").value);
		var name = document.getElementById("name").value;
		var iname = document.getElementById("iname").value;
		//插入表格
		var tabRow;
		for(var i = 1; i < mytab.rows.length; i++) {
			var num = parseInt(mytab.rows[i].cells[0].innerText);
			//如果当前的表单中编号和输入的编号有重复提示用户，并返回不添加
			if(num == no) {
				alert("");
				return false;
			}
			//输入的编号小于当前遍历的某个编号是，插入当前位置
			if(num > no) {

				tabRow = mytab.insertRow(i); //如果已有的编号大于输入编号，插入到当前行

				tabRow.insertCell(0).innerHTML = no;
				tabRow.insertCell(1).innerHTML = name;
				tabRow.insertCell(2).innerHTML = iname;
				tabRow.insertCell(3).innerHTML = "<a href='#' onclick=del(" +
					no + ")>删除</a>||<a onclick=alter(" + no + ") href='#'>修改</a>";
				return;

			}

		}

		//要插入的行
		tabRow = mytab.insertRow(mytab.rows.length);

		//插入行的列
		tabRow.insertCell(0).innerHTML = no;
		tabRow.insertCell(1).innerHTML = name;
		tabRow.insertCell(2).innerHTML = iname;
		tabRow.insertCell(3).innerHTML = "<a href='#' onclick=del(" +
			no + ")>删除</a>||<a onclick=alter(" + no + ") href='#'>修改</a>";
		document.getElementById("index").value = "";
		document.getElementById("name").value = "";
		document.getElementById("iname").value = "";
	}
	function xianshi() {
		//切换添加表单
		var display = document.getElementById("add");
		if(display.style.display == "block") {
			display.style.display = "none";
		} else {
			display.style.display = "block";
		}

	}
}
</script>
</html>